<template>
        <div>
                <Input v-model="filter.title" style="width:260px">                        
                        <Button slot="append" icon="ios-search" @click="search">搜索</Button>                        
                </Input>
                
                <p style="padding:5px 0"><Button type="primary" @click="addContent">添加评论</Button></p>                
               
                <Table border :columns="columns" :data="list"></Table>
                <br>
                
                <Page :total="total" show-total show-elevator show-sizer :page-size="5"  @on-change="onChange" :page-size-opts="[5, 10, 15, 20]" @on-page-size-change="pageChange"></Page>
                
                <!-- 弹框 -->





                <!-- 增加 -->
                <Modal

                        v-model="modalAdd"
                        title="添加评论"
                        @on-ok="comfirm">                          
                        <p><Input v-model="addAndUpdata.title" placeholder="姓名"  clearable style="width: 200px"></Input></p>
                        <br>
                        <p><Input v-model="addAndUpdata.comment" placeholder="评论内容"  clearable style="width: 200px"></Input></p>
                 </Modal>

                <!--改 -->
                <Modal
                        v-model="modal"
                        title="请选择字段名称"
                        @on-ok="ok">
                        <Form ref="formValidate" :model="formValidate"  :label-width="80">
                              <FormItem label="" prop="field" style="width:300px">
                                  <Select v-model="formValidate.field" placeholder="选择字段名称">
                                      <Option value="title">姓名</Option>
                                      <Option value="comment">评论内容</Option>
                                  </Select>
                              </FormItem>
                              <FormItem label="" prop="content" style="width:300px">
                                  <Input v-model="formValidate.content" placeholder="输入修改内容..."></Input>
                              </FormItem>
                         </Form>
                </Modal>

           

        </div>        
</template>

<script>
import mix from './mix'
export default {
  mixins:[mix],
  data() {
    return {
      module:'comment',
      columns: [
        {
          title: "姓名 ",
          key: "title",
          align: "center"
        },
        {
          title: "评论内容",
          align: "center",
          key: "comment"
        },
        {
          title: "操作",
          key: "action",
          width: 150,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small",
                    id: 100
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.update(params.index);
                    }
                  }
                },
                "修改"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.remove(params.index);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ]      
      
    };
  }
}
</script>
